extends ../common/layout.pug

block body
  .m-classroom
    include ../common/header.pug
    include ../common/banner.pug
    include ../common/nav.pug
    .g-tab.g-clearfix
      li(:class="{active: tab === 0}", @click="tab = 0") 教室
      li(:class="{active: tab === 1}", @click="tab = 1") 多媒体教室
    
    .classroom(v-show="tab === 0")
      .row
        .col-xs-6.col-sm-3.classroom-item(@click="onClickClassroomItem(true, true)")
          .img
            img(src="https://www.ziweiyang.com/upload/images/coursebook_category/img/20150504112616_16.jpg")
            .latest.icon.right
          .title 八字一（试读）
          .time 2017-08-09
          button
            i.iconfont.icon-share
            span 详情

        .col-xs-6.col-sm-3.classroom-item(@click="onClickClassroomItem(false)")
          .img
            img(src="https://www.ziweiyang.com/upload/images/coursebook_category/img/20150504112616_16.jpg")
            .readed.icon
          .title 八字一（试读）
          .time 2017-08-09
          button
            i.iconfont.icon-share
            span 详情

        .col-xs-6.col-sm-3.classroom-item(@click="onClickClassroomItem(true, false)")
          .img
            img(src="https://www.ziweiyang.com/upload/images/coursebook_category/img/20150504112616_16.jpg")
            .free.icon
          .title 八字一（试读）
          .time 2017-08-09
          button
            i.iconfont.icon-share
            span 详情

        .col-xs-6.col-sm-3.classroom-item(@click="onClickClassroomItem(true, false)")
          .img
            img(src="https://www.ziweiyang.com/upload/images/coursebook_category/img/20150504112616_16.jpg")
            .buyed.icon
          .title 八字一（试读）
          .time 2017-08-09
          button
            i.iconfont.icon-share
            span 详情

    .media-classroom(v-show="tab === 1")
      .row
        .col-xs-12.col-sm-4.media-classroom-item(@click="onClickClassroomItem(true, true)")
          .img
            img(src="https://gitee.com/index/mockup_enterprise.png")
            .readed.icon
          .title 《紫微杨，如是说》
          .time 2017-08-09
        .col-xs-12.col-sm-4.media-classroom-item(@click="onClickClassroomItem(false)")
          .img
            img(src="https://gitee.com/index/mockup_enterprise.png")
            .latest.icon.right
          .title 《紫微杨，如是说》
          .time 2017-08-09
        .col-xs-12.col-sm-4.media-classroom-item(@click="onClickClassroomItem(true, false)")
          .img
            img(src="https://gitee.com/index/mockup_enterprise.png")
            .icon.buyed
          .title 《紫微杨，如是说》
          .time 2017-08-09
        .col-xs-12.col-sm-4.media-classroom-item(@click="onClickClassroomItem(false)")
          .img
            img(src="https://gitee.com/index/mockup_enterprise.png")
            .icon.free
          .title 《紫微杨，如是说》
          .time 2017-08-09

    .pagination
      .g-pagination
        ul
          a.active 1
          a 2
          a 3
          a 4
          a 5
          a 6
          a.next >

    .g-modal(v-show='isShowModal')
      .mask(@click="onClickModalClose")
      .content
        .row
          .col-sm-4
            .img
              img(src="https://www.ziweiyang.com/upload/images/coursebook_category/img/20150504112616_16.jpg", alt="")
          .col-sm-8.desc
            p 
              span.g-color-main 课程名称：
              span 八字一（试读）
            p 
              span.g-color-main 上传时间：
              span 2016.11.11
            p 
              span.g-color-main 课程简介：
              span 我个人认爲『八字』是各门术数的基础，如果不懂『八字』，是很难或可说无法去研究其他更高级的术数如『六壬』及『奇门遁甲』等。就算学『紫微斗数』和『风水』，也应对『八字』有一定的认识。    我个人认爲『八字』是各门术数的基础，如果不懂『八字』，是很难或可说无法去研究其他更高级的术数如『六壬』及『奇门遁甲』等。就算学『紫微斗数』和『风水』，也应对『八字』有一定的认识。    我个人认爲『八字』是各门术数的基础，如果不懂『八字』，是很难或可说无法去研究其他更高级的术数如『六壬』及『奇门遁甲』等。就算学『紫微斗数』和『风水』，也应对『八字』有一定的认识。    我个人认爲『八字』是各门术数的基础，如果不懂『八字』，是很难或可说无法去研究其他更高级的术数如『六壬』及『奇门遁甲』等。就算学『紫微斗数』和『风水』，也应对『八字』有一定的认识。
            button.btn.is-primary(v-show='!isAuth') 请登录
            button.btn.is-success(v-show='isAuth && isPay') 开始课程
            a.is-no-pay(v-show='isAuth && !isPay') 
              .img
                img(src='../images/classroom/hand.png')
              .text 使用3.00个会员点数开始课程
        .icon.close(@click="onClickModalClose", v-show='!isAuth')
        .icon.green-close(@click="onClickModalClose", v-show='isAuth && isPay')
        .icon.red-close(@click="onClickModalClose", v-show='isAuth && !isPay')





block script
  include ../common/script.pug
  script(src="../js/classroom.js", type="text/javascript")